// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require("gulp");
const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
const del = require("del");
const { stream } = require("browser-sync");
const bs = require("browser-sync").create(); //创建一个开发服务器

const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",

      link: "about.html",
    },
    {
      name: "Contact",

      link: "#",

      children: [
        {
          name: "Twitter",

          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",

          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",

          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),

  date: new Date(),
};
const config = {
  src: "src",
  dist: "dist",
  public: "public",
  temp: "temp",
  paths: {
    pages: "src/*.html",
    styles: "src/assets/styles/**/*.scss",
    scripts: "src/assets/scripts/**/*.js",
    images: "src/assets/images/**/*.{jpg,jpeg,png,gif,svg}",
    fonts: "src/assets/fonts/**/*.{eot,svg,ttf,woff,woff2}",
  },
};
const clean = () => {
  return del(["dist", "temp"]); //需要压缩的和开发阶段就要转换的文件放到临时目录temp，不需要压缩的，上线的时候才做转换的就直接放到dist，
  //dist是最终上线打包的目录
};
const style = () => {
  return src(config.paths.styles, { base: "src" }) //转换源
    .pipe(plugins.sass({ outputStyle: "expanded" })) //使用插件转换，outputStyle 最后一个大括号自动展开
    .pipe(dest(config.temp)) //目标地址
    .pipe(bs.reload({ stream: true }));
};
const script = () => {
  return src(config.paths.scripts, { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest(config.temp))
    .pipe(bs.reload({ stream: true }));
};
const page = () => {
  return src(config.paths.pages)
    .pipe(plugins.swig(data, { defaults: { cache: false } }))
    .pipe(dest(config.temp))
    .pipe(bs.reload({ stream: true }));
};
const image = () => {
  return src(config.paths.images, { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest(config.temp));
};
const font = () => {
  return src(config.paths.fonts, { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest(config.temp));
};
const extra = () => {
  return src("public/**").pipe(dest(config.temp));
};

const useref = () => {
  return src("temp/*.html", { base: "temp" }) //把temp的文件拿出来压缩，放到dist目录
    .pipe(plugins.useref({ searchPath: ["temp", "."] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify())) //若是js文件则执行这个plugins.uglify转换流
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(
      plugins.if(
        /\.html$/,
        plugins.htmlmin({
          collapseWhitespace: true, //标签之间的空格进行压缩
          minifyCSS: true, //行内样式压缩
          minifyJS: true, //行内script压缩
        })
      )
    )
    .pipe(dest(config.dist));
};

//自动刷新浏览器

const serve = () => {
  watch(config.paths.styles, style);
  watch(config.paths.scripts, script);
  watch(config.paths.pages, page);
  watch([config.paths.images, config.paths.fonts, config.public], bs.reload);
  bs.init({
    watch: true,
    notify: false,
    // files:'temp/**',
    server: {
      baseDir: ["temp", "src", "public"],
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const compile = parallel(style, script, page);
const noCompile = parallel(image, font, extra);
const build = series(clean, parallel(series(compile, useref), noCompile));
const develop = series(compile, serve);
module.exports = {
  compile,
  develop,
  build,
  clean,
};
